<template>

  <div class="public-service">
    <el-table :data="state.tableData" :header-cell-style="{
      background: '#fafafa', color: '#000000', height: '60px', fontWeight: '700'
    }" style="width:100%;height:380px;font-size:18px" :row-style="{ height: '60px' }">
      <el-table-column prop="name" label="服务名称" width="180" align="left">
      </el-table-column>

      <el-table-column prop="num" label="故障数" width="260" align="left">
        <template #default="scope">
          <div style="display: flex; align-items: center">
            <!-- <el-icon><timer /></el-icon>
          <span style="margin-left: 10px">{{ scope.row.date }}</span> -->
            <div class="chart3" :ref="scope.row.id"></div>
          </div>
        </template>
        <!-- <template slot-scope="scope">
          <e-charts class="chart1" :option="getOption(scope.row.num)"></e-charts>
        </template> -->
      </el-table-column>
      <el-table-column prop="time" label="耗时" width="120">
      </el-table-column>
      <el-table-column prop="sucess" label="成功率" width="140">
      </el-table-column>
      <el-table-column prop="growp" label="增长率" width="140">
      </el-table-column>
      <el-table-column prop="transaction" label="交易笔数" sortable width="140">
      </el-table-column>
      <el-table-column prop="business" label="影响业务" width="140">
      </el-table-column>
    </el-table>
  </div>
</template>
<script setup>
/**
 * 模块引入
 */
import { reactive, ref, onMounted, getCurrentInstance } from 'vue';
import * as echarts from 'echarts';
const { proxy } = getCurrentInstance();
/**
 * 数据
 */
// const echartsEle = ref();

const state = reactive({
  tableData: [
    {
      name: "综合支付前置",
      id: "1",
      num: [20],
      time: "2.89s",
      sucess: "90%",
      growp: "5%",
      transaction: "2795",
      business: "5"
    },
    {
      name: "综合支付前置",
      id: "2",
      num: [16],
      time: "2.89s",
      sucess: "90%",
      growp: "5%",
      transaction: "2495",
      business: "5"
    },
    {
      name: "综合支付前置",
      id: "3",
      num: [12],
      time: "2.89s",
      sucess: "90%",
      growp: "5%",
      transaction: "2895",
      business: "5"
    },
    {
      name: "综合支付前置",
      id: "4",
      num: [8],
      time: "2.89s",
      sucess: "90%",
      growp: "5%",
      transaction: "2895",
      business: "5"
    },
    {
      name: "综合支付前置",
      id: "5",
      num: [6],
      time: "2.89s",
      sucess: "90%",
      growp: "5%",
      transaction: "2895",
      business: "5"
    }
  ]
});
/**
 * 功能方法
 */


onMounted(() => {
  publicService();
})
const publicService = () => {
  setTimeout(_ => {
    state.tableData.forEach(e => {
      let myChart3 = echarts.init(proxy.$refs[e.id]);
      myChart3.setOption({
        // grid: {
        //   left: "0",
        //   top: "10%",
        //   right: "0",
        //   bottom: "10%",

        // },
        xAxis: {
          type: "value",
          show: false,
          max: 20
        },
        yAxis: {
          type: "category",
          show: false
        },
        series: [
          {
            data: e.num,
            type: "bar",
            barWidth: "20%",
            label: {
              show: true, //开启显示
              // inside(自适应，柱状内部中央),top（柱状外的正上方）,bottom(柱状外的正下方)，left(柱状外的左边)，right(柱状外的右边)。
              //insideTop(柱状内部靠顶部)，insideBottom(柱状内部靠下方)，insideRight(柱状内部靠右边)，insideLeft(柱状内部靠左边)。
              position: "insideLeft", //在上方显示
              // formatter: '{c}%',//显示百分号
              textStyle: {
                //数值样式
                color: "white", //字体颜色
                fontSize: 14 //字体大小
              }
            },
            itemStyle: {
              //给柱状设置渐变颜色
              // normal: {
              // 圆角边框
              // barBorderRadius: 7,
              color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                { offset: 1, color: "#ffc867" },
                { offset: 0, color: "#f5953e" }
              ])
              // }
            }
          }
        ]
      });
      window.addEventListener("resize", () => {
        myChart3.resize();
      });
    });
  }, 1000);
}




</script>
<style scoped>
:deep(.el-table) {
  /* 透明度为0，不显示背景色 */
  background-color: rgba(22, 7, 235, 0.5);
}

/* 头部标题组件 */
:deep(.el-table th.el-table__cell) {
  /* 透明度为0，不显示背景色 */
  background-color: rgba(32, 9, 236, 0.5);
  /* 文字颜色 */
  color: skyblue;
  /* 背景图片，可以为表格头部设置背景颜色，不过如果背景是透明的，
  可以直接把父div的背景图片当做是这里的图片，只要把表格放在对应的位置就行了，
  看自己选择 
  */
  /* background-image: url("https://element-plus.org/images/element-plus-logo.svg"); */
}

/* 头部与body下面的分割线 */
:deep(.el-table th.el-table__cell.is-leaf) {
  border-bottom: none;
}

/* 表格行背景色 */
:deep(.el-table tr) {
  /* 透明度为0，不显示背景色 */
  background-color: rgba(40, 4, 243, 0);
  /* 文字颜色 */
  color: aquamarine;
}

/* 表格行之间的分割线 */
:deep(.el-table td.el-table__cell, .el-table th.el-table__cell.is-leaf) {
  border-bottom: none;
}

/* 表格底部分割线，不知道表达的是什么，注释一下这个就知道了  */
:deep(.el-table__inner-wrapper:before) {
  bottom: 0;
  height: 0px;
  left: 0;
}


/* 鼠标悬停背景色 */
:deep(.el-table--enable-row-hover .el-table__body tr:hover>td.el-table__cell) {
  background-color: rgba(116, 85, 228, 0.671);
}

/* 鼠标选中背景色，行点击事件 */
:deep(.el-table__body tr.current-row>td.el-table__cell) {
  background-color: green;
}

.public-service {
  width: 100%;
  height: 400px;
  padding-top: 5px;
  padding-left: 20px;

}


.el-table::before {
  height: 0px;
}

.chart3 {
  width: 100px;
  height: 30px;
  margin-top: 10px;
}
</style>